$f: 19.2;


.home {
  position: relative;
  background: #F9F9F9;

  .bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      display: block;
      object-fit: cover;
       height: 100%;
    }
  }

  .main {
    padding: 206/$f+vw 120/$f+vw 120/$f+vw 160/$f+vw ;
    position: relative;
    z-index: 10;

    .section1 {
      .tag {
        color: #0F77FF;
        line-height: 1.5;
        text-transform: capitalize;
      }

      h1 {
        margin: 32/$f+vw 0 40/$f+vw 0;
        line-height: 1;
        text-transform: capitalize;
        font-weight: 400;
      }

      .html{
        width: 1203/$f+vw;
        line-height: 2;
        font-weight: 300;
        img{
          width: 100%;
          border-radius: 15/$f+vw;
        }
        .flex_pic{
          display: flex;
          justify-content: space-between;
          gap: 40/$f+vw;
          .pic{
            width: 50%;
          }
        }
      }
    }

  }

  @media screen and (max-width: 1024px) {
    .main{
      padding: 120px 5% 60px 5%;
      .section1{
        h1{
          margin: 16px 0 20px 0;
          line-height: 1.2;
        }
        .html{
          width: 100%;
          line-height: 1.8;
          img{
            border-radius: 10px;
          }
          .flex_pic{
            gap: 20px;
          }
        }
      }
    }
  }
}